<template>
  <view class="account-security">
    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 当前账号 -->
      <view class="security-item">
        <view class="item-left">
          <text class="item-title">当前账号</text>
        </view>
        <view class="item-right">
          <text class="account-number">{{ accountNumber }}</text>
        </view>
      </view>

      <!-- 重置支付密码 -->
      <view class="security-item clickable" @click="resetPaymentPassword">
        <view class="item-left">
          <text class="item-title">重置支付密码</text>
        </view>
        <view class="item-right">
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AccountSecurity',
  data() {
    return {
      accountNumber: '19083139164'
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 重置支付密码
    resetPaymentPassword() {
      uni.navigateTo({
        url: '/pages/resetPassword/resetPassword'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-security {
  min-height: 100vh;
  background-color: #f8f9fa;
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 100;
    
    .header-left {
      .icon {
        font-size: 40rpx;
        color: #333333;
        font-weight: 300;
      }
    }
    
    .header-title {
      text {
        font-size: 34rpx;
        font-weight: 600;
        color: #333333;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 24rpx;
      
      .icon {
        font-size: 32rpx;
        color: #666666;
        font-weight: 400;
      }
    }
  }
  
  .content {
    padding: 20rpx 30rpx;
    
    .security-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40rpx 30rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &.clickable {
        cursor: pointer;
        
        &:active {
          transform: scale(0.98);
          background-color: #f8f9fa;
        }
      }
      
      .item-left {
        .item-title {
          font-size: 32rpx;
          color: #333333;
          font-weight: 500;
        }
      }
      
      .item-right {
        display: flex;
        align-items: center;
        
        .account-number {
          font-size: 32rpx;
          color: #666666;
          font-weight: 400;
        }
        
        .arrow {
          font-size: 36rpx;
          color: #cccccc;
          margin-left: 16rpx;
          font-weight: 300;
        }
      }
    }
  }
}
</style> 